<template>
  <div class="shop">

    <div class="banner"><img :src="banner" alt="" class="bannerimg"></div>

    <div class="goddess-rec">
      <div class="rec-box">
        <ul class="rec-list clearfix">
          <li class="rec-li" v-for="(item,index) in tuijianList">
            <div class="img">
              <a @click="redirect(item.product_id)">
                <img v-if="item.thumb!=null" :src="item.thumb" :onerror="logo" alt="">
                <img v-if="item.thumb==null" src="../../assets/default.png" alt="">
              </a>
            </div>
            <div class="rec-t">
              <a @click="redirect(item.product_id)">{{item.name}}</a>
            </div>
            <div class="price-b clearfix">
              <div class="fl">
                <span class="price">{{item.price}}</span>
              </div>
              <div class="fr">
              <span class="shoucang " :class="{ 'active': wishList(item.product_id)}" :data-id="item.product_id" v-on:click="shoucangFn(index,item.product_id)">
              </span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <span class="buy" v-on:click="gotoAddress('/me/shopping')"><i v-if="cartNum !=0" class="mint-badge is-success is-size-small">{{cartNum}}</i></span>

  </div>
</template>

<script>
  import {Toast} from 'mint-ui';
  export default {
    name: 'ShopSpecial',
    data () {
      return {
        banner:'',
        tuijianList: [],
        arr2: [],
        token:sessionStorage.user && JSON.parse(sessionStorage.user).token || '',
        maxpage:10,
        cartNum:0,
        logo: 'this.src="' + require('../../assets/default.png') + '"'
      }
    },
    mounted:function(){

      let _this = this;
      let page = 1;
      this.getWish();
      this.getProduct(page);
      this.getCartNum();
      var ajaxData ={};
      ajaxData.category_id = this.$route.query.cid;

      $.ajax({
        type:'post',
        url: RouteMap.categoryView,
        data:ajaxData,
        success:function(res){
          if(res.code == 200){

            _this.banner = res.data.image;

          }
          else{
            //Toast(res.msg)
          }
        }
      })

      $(window).off('scroll');
      $(window).on('scroll',function () {
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();
        if (scrollTop + windowHeight == scrollHeight) {
          page = page + 1;
          if (page > 10) {
            return;
          }
          _this.getProduct(page);
        }
      });
    },
    methods:{
      gotoAddress(path){
        this.$router.push(path)
      },
      shoucangFn:function(index,id){

        let _this = this;
        if (_this.token == '') {
//          _this.$router.push('/login');
          _this.$router.push({path:'/login',query: {redirect: location.hash.replace('#','')}});
          return;
        }

        var $this = $("[data-id]").eq(index);

        if ($this.hasClass('active')) {
          $this.removeClass('active');
          _this.removeWishlist(id)
        }
        else {
          $this.addClass('active');
          _this.addWishlist(id);
        }
      },
      redirect: function (id) {
        this.$router.push({path: '/shop/details/' + id});
      },
      addWishlist: function (id) {
        var ajaxData = {};
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        ajaxData.product_id = id;
        $.ajax({
          type: 'post',
          url: RouteMap.wishlistAdd,
          data: ajaxData,
          success: function (res) {
            if (res.code == 200) {
              Toast("收藏成功");
            }
            else {
              //Toast(res.msg)
            }
          }
        })
      },
      removeWishlist: function (id) {
        let ajaxData = {};
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        ajaxData.product_id = id;
        $.ajax({
          type: 'post',
          url: RouteMap.wishlistRemove,
          data: ajaxData,
          success: function (res) {
            if (res.code == 200) {

              Toast("取消收藏");

            }
            else {
              //Toast(res.msg)
            }
          },
          error:function(){
            Toast("发生未知错误");
          }
        })
      },
      getWish: function () {
        var ajaxData = {};
        var arr = [];
        var _this = this;
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        if (!ajaxData.token) {
          return;
        }
        $.ajax({
          type: 'post',
          url: RouteMap.wishlistGet,
          data: ajaxData,
          success: function (res) {
            if (res.code == 200) {
              arr = res.data.products;
              for (var i = 0; i < arr.length; i++) {
                _this.arr2.push(arr[i].product_id);
              }
            }
            else {
              //Toast(res.msg)
            }
          }
        })
      },
      wishList: function (id) {

        var ajaxData = {};
        ajaxData.token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        if (!ajaxData.token) {
          return false;
          return;
        }
        var i = this.arr2.length;
        while (i--) {
          if (this.arr2[i] === id) {
            return true;
          }
        }
        return false;
      },
      getProduct: function (page) {

        if(page>this.maxpage){
          return;
        }

        var _this = this;
        setTimeout(function () {
          var categoryData = {};
          categoryData.cid = _this.$route.query.cid;
          categoryData.pn = page || 1;
          $.ajax({
            type: 'post',
            url: RouteMap.categoryList,
            data: categoryData,
            success: function (res) {
              if (res.code == 200) {

                _this.tuijianList = _this.tuijianList.concat(res.data.products);
                _this.maxpage = res.data.maxpage;
              }
              else {
                //Toast(res.msg)
              }
            }
          })
        });
      },
      getCartNum:function(){
        var token = sessionStorage.user && JSON.parse(sessionStorage.user).token;
        var _this = this;
        if(!token){
          return;
        }
        var ajaxData = {};
        ajaxData.token = token;

        setTimeout(function(){
          $.ajax({
            type:'post',
            url: RouteMap.cartNum,
            data:ajaxData,
            cache:false,
            success:function(res){
              if(res.code == 200){

                _this.cartNum = res.data.num;

              }
              else{
                //Toast(res.msg)
              }
            }
          })
        },100)

      }
    },
    components: {
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .shop{
    background: #fff;
  }

  .goddess-rec{
    background: #fff;
    margin-top: .5rem;
    padding-left: .23rem;
    padding-bottom: .5rem;
    color: #707070;
  }
  .goddess-rec .tt{
    text-align: center;
    padding: .5rem 0 .2rem;
  }
  .goddess-rec .tt span{
    display: inline-block;
    background: #ff7b80;
    color: #fff;
    padding: .1rem .3rem;
  }
  .goddess-rec .rec-li{
    float: left;
    width: 7rem;
    margin-left: .5rem;
    margin-top: .5rem;

  }
  .goddess-rec .rec-li .img{
    width:100%;
    height:8.6rem;
    overflow: hidden;
    position: relative;
  }
  .goddess-rec .rec-li .img img{
    max-width: 100%;
    max-height:100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .goddess-rec a{
    color: #707070;
  }
  .goddess-rec .rec-t{
    padding-top: .2rem;
    height: 1.8rem;
    line-height: .9rem;
    overflow: hidden;
    margin-bottom: .2rem;
    font-size: .6rem;
  }
  .goddess-rec .guanzhu{

  }
  .goddess-rec .shoucang img{
    width: .7rem;
  }
  .goddess-rec .fr{
    padding-right: .2rem;
  }

  .buy{
    position: fixed;
    width: 1.8rem;
    height: 1.8rem;
    background: url("../../assets/shop/buy.png");
    background-size: 100% 100%;
    bottom:1rem;
    right: 1rem;
  }
  .bannerimg{
    width: 100%;
  }

  .goddess-rec .shoucang {
    width: .7rem;
    height: .7rem;
    display: inline-block;
    background: url("../../assets/content/icoa3.png");
    background-size: 100% 100%;
  }

  .goddess-rec .shoucang.active {
    width: .7rem;
    height: .7rem;
    display: inline-block;
    background: url("../../assets/content/icoa3-ac.png");
    background-size: 100% 100%;
  }

  .goddess-rec .fr {
    padding-right: .2rem;
  }
  .buy{
    position: fixed;
    width: 1.8rem;
    height: 1.8rem;
    background: url("../../assets/shop/buy.png");
    background-size: 100% 100%;
    bottom:3rem;
    right: 1rem;
  }
  .buy i{position: absolute; right: -5px; top: -5px; }
</style>
